<template>
	<view class="bg-white" style="height: 100vh;">
		<cu-custom :bgColor="NavBarColor" :isBack="true" backFlag="navigate">
			<block slot="backText">返回</block>
			<block slot="content">统计</block>
		</cu-custom>
	
		<!-- 筛选框 -->
		<view class="solid-bottom">
			<view class="cu-bar bg-white search fixed" :style="[{top:CustomBar + 'px'}]">
				<view class="action">
					<text style="width: 3.5rem;">月份</text>
					<picker style="width: 6rem;" mode="date" :value="inquire.reportTime" :start="startDate" :end="endDate" @change="bindDateChange" fields="month">
						<view class="uni-input">{{inquire.reportTime}}</view>
					</picker>
					<app-select  placeholder="类别筛选" 
						:dict="bx_type" 
						v-model="inquire.projectName"
						></app-select>					
					<button class="cu-btn shadow-blur round" style="width: 5rem; background-color: #f0b863;color: #ffffff;" @tap="goStatistics()">查询</button>
					<button class="cu-btn shadow-blur round" style="width: 5rem; background-color: #f27050;color: #ffffff;" @tap="reset()">重置</button>
					
				</view>
			</view>
		</view>

		<view class="cu-list menu" style="margin-top: 4rem;">
			
			<view class="cu-item animation-slide-bottom" :style="[{animationDelay: '0.2s'}]">
				<view class="content">
					<text class="text-black title ">待审核:</text>
				</view>
				<view class="action">
					<text class="text-black title ">{{annotation.toBeReviewed}}</text>
				</view>
			</view>

			<view class="cu-item animation-slide-bottom" :style="[{animationDelay: '0.2s'}]">
				<view class="content">
					<text class="text-black title ">已通过:</text>
				</view>
				<view class="action">
					<text class="text-black title ">{{annotation.alreadyPassed}}</text>
				</view>
			</view>
			
			<view class="cu-item animation-slide-bottom" :style="[{animationDelay: '0.2s'}]">
				<view class="content">
					<text class="text-black title ">未通过:</text>
				</view>
				<view class="action">
					<text class="text-black title ">{{annotation.notPass}}</text>
				</view>
			</view>
			
			<view class="cu-item animation-slide-bottom" :style="[{animationDelay: '0.2s'}]">
				<view class="content">
					<text class="text-black title ">总上报:</text>
				</view>
				<view class="action">
					<text class="text-black title ">{{annotation.total}}</text>
				</view>
			</view>

		</view>
		
	</view>
</template>

<script>
import appSelect from '@/components/my-componets/appSelect.vue'

export default {
	components:{
		appSelect
	 },
	data(){
		const currentDate = this.getDate({
		    format: true
		})
		return{
			NavBarColor:this.NavBarColor,
			annotation:{
				toBeReviewed:"",
				alreadyPassed:"",
				notPass:"",
				total:"",
			},
			inquire:{
				reportTime:currentDate,
				projectName:"",
			},
			TabCur: 0,
			goodNumber:null,
			flg:true,
			src:"",
			pic:"",
			bx_type: [
				{value:'1',text:"招待费",},
				{value:'2',text:"材料费"},
				{value:'3',text:"交通费"},
				{value:'4',text:"住宿费"},
				{value:'5',text:"市内交通"},
				{value:'6',text:"轮船费"},
				{value:'7',text:"飞机费"},
				{value:'8',text:"公关费"},
				{value:'9',text:"施工费"},
				{value:'10',text:"杂支"}
			],
			url:"/api/v1/appbusiness/two/getStatistics",
			
		}
	},

	onLoad: function (option) {
		// 初始化数据
		this.getStatistics();
	},
	computed: {
        startDate() {
            return this.getDate('start');
        },
        endDate() {
            return this.getDate('end');
        }
    },
	methods:{
		getStatistics(){
	
			//联网加载数据
			console.log("tabindex",this.TabCur )
			this.$http.get(this.url,{params:{reportTime: this.inquire.reportTime,projectName: this.inquire.projectName}}).then(res=>{
				//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
				//设置列表数据
				  if (res.data.success) {
					 console.log("res",res.data)
				     
					 this.annotation = res.data.result
				 }
						
			}).catch(()=>{
				//联网失败, 结束加载
			})
			
		},
		goStatistics(){
			this.getStatistics();
		},
		reset(){
			this.inquire.reportTime = this.getDate({
		    format: true
		});
			this.inquire.projectName = "";
		},
		bindDateChange: function(e) {
		    this.inquire.reportTime = e.detail.value
		},
		getDate(type) {
		    const date = new Date();
		    let year = date.getFullYear();
		    let month = date.getMonth() + 1;
					
		    if (type === 'start') {
		        year = year - 60;
		    } else if (type === 'end') {
		        year = year + 2;
		    }
		    month = month > 9 ? month : '0' + month;
		    return `${year}-${month}`;
		},
		showVideo() {
			uni.navigateTo({
				url: '/pages/common/commonVideo?item='+this.src
			}) 
		}, 
		showPic() {
		    console.log(this.pic)
			uni.navigateTo({
				url: '/pages/common/commonPic?item='+this.pic
			}) 
	   }
	}
}
</script>

<style>
	
</style>
